<template>
  <div class="home">
    <div class="jumbotron bg-light p-5 rounded-3 mb-4">
      <div class="container-fluid py-5">
        <h1 class="display-5 fw-bold">欢迎使用 NestJS 学习项目</h1>
        <p class="col-md-8 fs-4">
          这是一个基于 NestJS 后端和 Vue 3 前端的全栈学习项目。 项目包含用户管理、角色管理等功能模块。
        </p>
        <router-link class="btn btn-primary btn-lg" to="/users"> 开始探索 </router-link>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title"><i class="bi bi-people-fill me-2"></i>用户管理</h5>
            <p class="card-text">管理系统用户，包括用户的创建、编辑、删除等操作。</p>
            <router-link to="/users" class="btn btn-outline-primary"> 查看用户 </router-link>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title"><i class="bi bi-shield-check me-2"></i>角色管理</h5>
            <p class="card-text">管理系统角色和权限，实现基于角色的访问控制。</p>
            <router-link to="/roles" class="btn btn-outline-primary"> 查看角色 </router-link>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title"><i class="bi bi-gear-fill me-2"></i>系统设置</h5>
            <p class="card-text">系统配置和设置管理，包括日志、拦截器等功能。</p>
            <router-link to="/settings" class="btn btn-outline-primary"> 系统设置 </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速入口 -->
    <section class="quick-links mt-4">
      <h4 class="section-title mb-3">快速入口</h4>
      <div class="row g-3">
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body">
              <h6 class="card-title"><i class="bi bi-speedometer2 me-2"></i>仪表盘</h6>
              <p class="card-text">查看关键指标与系统运行情况。</p>
              <router-link to="/dashboard" class="btn btn-outline-primary btn-sm"> 前往仪表盘 </router-link>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body">
              <h6 class="card-title"><i class="bi bi-bar-chart-fill me-2"></i>数据报表</h6>
              <p class="card-text">浏览业务报表与趋势分析。</p>
              <router-link to="/reports" class="btn btn-outline-primary btn-sm"> 查看报表 </router-link>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body">
              <h6 class="card-title"><i class="bi bi-bag-fill me-2"></i>商品管理</h6>
              <p class="card-text">管理商品信息与分类。</p>
              <router-link to="/products" class="btn btn-outline-primary btn-sm"> 管理商品 </router-link>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body">
              <h6 class="card-title"><i class="bi bi-receipt-cutoff me-2"></i>订单管理</h6>
              <p class="card-text">查看订单与处理售后。</p>
              <router-link to="/orders" class="btn btn-outline-primary btn-sm"> 处理订单 </router-link>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card h-100">
            <div class="card-body">
              <h6 class="card-title"><i class="bi bi-gear-fill me-2"></i>系统设置</h6>
              <p class="card-text">系统配置与偏好设置。</p>
              <router-link to="/settings" class="btn btn-outline-primary btn-sm"> 前往设置 </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 系统概览（占位示例） -->
    <section class="system-overview mt-4">
      <h4 class="section-title mb-3">系统概览</h4>
      <div class="row g-3">
        <div class="col-md-3">
          <div class="stat-card p-3 rounded-3">
            <div class="stat-label">用户总数</div>
            <div class="stat-value">—</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="stat-card p-3 rounded-3">
            <div class="stat-label">角色数量</div>
            <div class="stat-value">—</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="stat-card p-3 rounded-3">
            <div class="stat-label">今日订单</div>
            <div class="stat-value">—</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="stat-card p-3 rounded-3">
            <div class="stat-label">活动商品</div>
            <div class="stat-value">—</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
// Home view logic
defineOptions({
  name: "HomeView",
});
</script>

<style scoped>
.jumbotron {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card {
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-5px);
}

.section-title {
  font-weight: 600;
}
.quick-links .card-text {
  color: #6c757d;
}
.system-overview .stat-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}
.system-overview .stat-label {
  color: #6c757d;
  font-size: 13px;
}
.system-overview .stat-value {
  font-size: 22px;
  font-weight: 700;
}
</style>
